<template>
  <div>
    <a-row :gutter="5">
      <a-col :span="5">
        <a-card :bordered="false" title="品牌分类" :headStyle="heightStyle" :body-style="bodyStyle">
          <a-row style="margin-left: 10px">
          </a-row>
          <a-tree
            :treeData="treeData"
            @select="onSelect"
          />
        </a-card>
      </a-col>
      <a-col :span="19">
        <a-card :bordered="false" title="品牌列表">
          <f-search-form :more="false" @searchHandler="searchHandler">
            <f-search-form-item label="品牌名称" name="brandName"/>
          </f-search-form>
          <f-table ref="table" size="default" rowKey="brandId" :columns="columns" :multiple="false" :operator="operator" :params="queryParam" :api="api.brand">
           <span slot="brandLogo" slot-scope="text, record, index">
              <img v-lazy="record.brandLogo"  v-viewer class="radius-img">
           </span>
            <span slot="recommend" slot-scope="text, record, index">
               <a-switch v-model="record.recommend==1" checkedChildren="是" unCheckedChildren="否" @change="(checked) => setRecommend(checked,record)"/>
             </span>
            <span slot="action" slot-scope="text, record">
            <template>
              <a @click="$refs.modal.handleShow(record)">编辑</a>
              <a-divider type="vertical"/>
            </template>
            <a-dropdown>
              <a class="ant-dropdown-link">
                更多 <a-icon type="down"/>
              </a>
              <a-menu slot="overlay">
                <a-menu-item v-if="$auth('table.delete')">
                  <a href="javascript:;" @click="$refs.table.remove(record.brandId)">删除</a>
                </a-menu-item>

              </a-menu>
            </a-dropdown>
          </span>
          </f-table>
        </a-card>
      </a-col>
    </a-row>
    <brand-drawer ref="modal" :cateGoryId="this.formItem.cateGoryId"></brand-drawer>
    <dict-form ref="dict"></dict-form>
  </div>
</template>

<script>
  import { listToTree2 } from '@/utils/util'

  import DictForm from '../../system/dict/dict_form'
  import BrandDrawer from './brand_drawer'

  export default {
    name: 'index',
    components: { BrandDrawer, DictForm },
    data () {
      return {
        saving: false,
        btnDisabled: true,
        parentId: null,
        bodyStyle: {
          minHeight: '600px'
        },
        heightStyle: {
          height: 55
        },
        formItem: {
          dictId: null,
          dicTitle: '',
          sortOrder: 0,
          parentId: 0
        },
        treeData: [],
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '品牌Logo',
            dataIndex: 'brandLogo',
            scopedSlots: { customRender: 'brandLogo' }
          },
          {
            title: '品牌名称',
            dataIndex: 'brandName'
          },
          {
            title: '所属分类',
            dataIndex: 'categoryName'
          },
          {
            title: '是否推荐',
            dataIndex: 'recommend',
            scopedSlots: { customRender: 'recommend' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        //操作按钮
        operator: [
          {
            name: '添加品牌',
            icon: 'plus',
            that: this,
            handler: function (table, that) {
              that.$refs.modal.handleShow()
            }
          },
          {
            name: '删除',
            icon: 'delete',
            batch: true,
            handler: function (table) {
              table.remove()
            }
          }
        ]
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      loadData () {
        this.http.get(this, {
          url: this.api.category.first,
          data: {
            params: {}
          },
          success: function (me, data) {
            let obj = listToTree2(data, {
              primaryKey: 'categoryId',
              titleKey: 'categoryName'
            })
            me.treeData = obj
          }
        })
      },
      onSelect (selectedKeys, { node }) {
        this.btnDisabled = false
        this.formItem = node.dataRef
        this.queryParam.categoryId = this.formItem.categoryId
        this.$refs.table.refresh()

      },
      onSuccess () {
        this.loadData()
      },
      setRecommend (check, record) {
        console.log(record)
        this.http.post(this, {
          url: this.api.brand.setRecommend,
          data: {
            ids: record.brandId,
            recommend: Number(check)
          },
          success (me, data) {
            record.recommend = data
          }
        })
      },
      delDict () {
        this.http.del(this, {
          url: this.api.dict.remove,
          data: {
            ids: this.formItem.dictId
          },
          success: function (me) {
            me.loadData()
            me.btnDisabled = true
          }
        })
      }
    }
  }
</script>
